<template>
  <div id="q-app">
    <router-view/>
  </div>
</template>

<script>
  import { authMixin } from './mixins/auth'

  export default {
    name: 'App',
    mixins: [authMixin],
    created () {
      // this.refreshToken()
      this.$q.screen.setSizes({ xs: 576, sm: 800, md: 1200, lg: 1600, xl: 1920 })
      this.$root.$on('updateUnreadCount', this.updateUnreadCount)
      this.updateUnreadCount()
      this.startInterval()

      if (process.env.NODE_ENV === 'development') {
        window.app = this
      }
    },
    watch: {
      auth (value, old) {
        if (!old && value && !this.$notifyInterval) {
          this.updateUnreadCount()
          this.startInterval()
        }
        if (!value && this.$notifyInterval) {
          window.clearInterval(this.$notifyInterval)
          this.$notifyInterval = null
        }
      }
    },
    methods: {
      onResize (size) {
        this.$store.commit('setWindowSize', size)
      },
      startInterval () {
        this.$notifyInterval = setInterval(() => this.updateUnreadCount(), 60000)
      },
      async updateUnreadCount () {
        const { status, data } = await this.getRequest({
          api: '/api/user/notification_count/'
        })

        if (status === 200) {
          this.$store.commit('setUnreadNotifyCount', data.count)
        }
      }
    }
  }
</script>

<style>
</style>
